<template>
  <div class="box">
    <!-- 一个商品 -->
    <div
      class="product"
      @click="$router.push(`/auction_details/${v.pid}`)"
      v-for="v in product"
      :key="v.pid"
    >
      <div class="image">
        <img :src="`/${v.pic}`" />
      </div>
      <div>{{ v.title }}</div>
      <div class="price">
        成交价：<span>RMB {{ v.price }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["product"],
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .product {
    flex-basis: 48%;
    margin-bottom: 10px;
    .image {
      height: 8.38em;
      display: flex;
      justify-content: center;
      background-color: #f5f5f5;
      img {
        max-width: 100%;
        border-radius: 0.315em;
      }
    }
    div {
      padding: 5px 0;
      font-size: 0.9em;
      line-height: 15px;
    }
    .price {
      span {
        color: #9a4145;
        font-weight: bold;
      }
    }
  }
}
</style>